<template>
  <div class="grid grid-rows-[1fr_30px]">
    <el-table :data="data" border stripe>
      <el-table-column prop="tName" label="塔号" align="center" />
      <el-table-column label="牵引力TP(走板到达塔位时各塔位的轴向张力) kN" align="center">
        <el-table-column v-for="col in columns" :key="col.label" :label="col.label" align="center">
          <template #default="scoped">
            <div :class="scoped.row[col.label].isColor ? 'isColor' : ''">
              <span :class="scoped.row[col.label].isMax ? 'isMax' : ''"> {{ scoped.row[col.label].value }} </span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="轴向张力最大值(kN)" align="center">
        <template #default="scoped">
          <div class="bg-blue-400 rounded-sm text-white">
            {{ scoped.row.max }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- flooter -->
    <div class="flooter">
      <div>张力整定值：{{ maxTT }}kN</div>
      <div>
        最大牵引力: {{ (maxTP * 1.1).toFixed(2) }}kN
        <span class="small-txt">(已考虑1.1倍安全系数)</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useCalculatePower from '@/composables/useCalculatePower'
import useTower from '@/composables/useTower'
import { ref } from 'vue'

type columnType = {
  label: string
  prop: string
}

const { power } = useCalculatePower()
const { all: findAllTower, towers } = useTower()
const data = ref()
const maxTT = ref(0)
const maxTP = ref(0)

const columns = ref<columnType[]>([])

async function init() {
  const zoneId = power.value!.config.zoneId
  await findAllTower({ zoneId })

  // 定义column名称
  columns.value = towers.value!.map((v) => ({
    label: v.tName,
    prop: v.tName,
  }))

  /**
   * !计算张力整定值
   */
  const tps = power.value!.powerTowers[0].Tp
  maxTT.value = JSON.parse(tps)[0].toFixed(2)

  data.value = power.value?.powerTowers.map((p) => {
    const lst_Tp = JSON.parse(p.Tp)
    const model = {
      tName: p.tower.tName,
    }
    /**
     * !取最大值
     */
    const max = Math.max(...lst_Tp)
    Reflect.set(model, 'max', max.toFixed(2))

    for (let index = 0; index < lst_Tp.length; index++) {
      Reflect.set(model, columns.value[index].label, {
        value: lst_Tp[index].toFixed(2),
        isColor: true,
        isMax: lst_Tp[index] === max,
      })
    }

    /**
     * !计算最大牵引力
     */
    maxTP.value = Math.max(maxTP.value, lst_Tp.pop().toFixed(2))
    return model
  })

  /**
   * !将数据不相同的单元格的颜色进行标注
   */
  for (let index = 1; index < data.value.length; index++) {
    const keys = Reflect.ownKeys(data.value[index])
    keys.forEach((key) => {
      if (key !== 'tName' && key !== 'max') {
        if (data.value[index][key].value === data.value[index - 1][key].value) {
          data.value[index][key].isColor = false
        }
      }
    })
  }
}

init()
</script>

<style scoped lang="scss">
.isColor {
  @apply rounded-sm bg-gray-300;
}
.isMax {
  @apply font-bold text-red-600;
}
.flooter {
  @apply bg-gray-300 text-gray-600 font-bold flex justify-center items-center gap-8;
  .small-txt {
    @apply text-xs text-gray-500;
  }
}
</style>
